<template>
	<view class="mysearch" :style="{marginTop:systemBarHeight+'px'}">
		<view class="search">
			<view class="left">
				<input class="input" @input="search"></input>
				<image src="../../static/images/commom/search.png" class="searchimg"></image>
			</view>
			<view class="right" @tap="backfirendlist">
				取消
			</view>
		</view>
		<view class="container" >
			<view>
				<view class="list userlist">
					<view class="title" v-show="userlist.length">
						用户
					</view>
					<view class="useritem" v-for="(item,index) in userlist" :key = "index" >
						<view class="left" @tap = "userinfo(item._id)">
							<image class="img" :src="item.imgurl"></image>
						</view>
						<view class="right">
							<view class="name" >
								<view class="user" v-html="item.name">	
								</view>
								<view class="email"  v-html="item.email">
								</view>
							</view>
							<view class="btn send" v-if = "item.isfriend && item._id != user.id" @tap.stop="chart(item)">
								发信息
							</view>
							<view class="btn add" v-if = "!item.isfriend && item._id != user.id" @tap.stop="addfriend(item)">
								加好友
							</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="list grouplist">
					<view class="title">
						群组
					</view>
					<view class="useritem">
						<view class="left">
							<image class="img" src="../../static/images/userimg/pic_b.jpg"></image>
						</view>
						<view class="right">
							<view class="name">
								用户1
							</view>
							<view class="btn send">
								发信息
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<transition name="fade">
			<infochange v-show="changeflag" 
			:title = "title"
			:value = "value"
			:uid = "uid"
			:fid = "fid"
			@close = "close"
			@decide = "decide"></infochange>
		</transition>
	</view>
</template>

<script>
	import data from "../../commoms/data/data.js"
	import myfunc from "../../commoms/js/myfunction.js"
	import infochange from "../../components/infochange/infochange.vue"
	export default {
		data() {
			return {
				user:'',
				userlist:[],
				title:'',
				value:'',
				uid:'',
				fid:'',
				changeflag:false,
				systemBarHeight:''
			};
		},
		onLoad(e){
			this.getSysteminfo();
			this.gettoken();
		},
		methods:{
			/*-------模拟数据
			search1(e){
				let keyword = e.detail.value;
				if(!keyword){
					this.userlist = []
					return
				}
				let exp = eval(`/${keyword}/g`)
				let friends = data.friendlist();
				this.userlist = friends.filter((item,index)=>{
					if(item.name.search(exp) != -1 || item.email.search(exp) != -1){
						if(item.imgurl){	
							item.imgurl = `../../static/images/userimg/pic_${item.imgurl}.jpg`;				
						}	
						this.isfriend(item)
						item.name = item.name.replace(exp,`<span style = "color:red">${keyword}</span>`)
						item.email = item.email.replace(exp,`<span style = "color:red">${keyword}</span>`)
						return item
					}			
				})
			},
			--*/
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			close(flag){
				this.changeflag = flag
			},
			decide(data,text){//发送好友申请
				uni.request({
					url:this.serverurl+'friend/applyfriend',
					data:{
						uid:data.uid,
						fid:data.fid,
						message:text,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{
						let info = result.data;
						if(info.status == 200){
							this.changeflag = false;
							uni.showToast({
								title: '申请添加用户成功',
								duration: 2000,
								icon:'none'
							});
						}else if(info.status == 500){
							uni.showToast({
								title: '网络异常,请检查',
								duration: 2000,
								icon:'none',
								position:'top'
							});
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			addfriend(item){//添加好友申请
				this.title = item.realname
				this.value = this.user.name+"向"+item.realname+"发出好友申请。"
				this.uid = this.user.id;
				this.fid = item._id;
				this.changeflag = true;
			},
			chart(id){//进入聊天室
				console.log(id)
				console.log(this.user)
			},
			userinfo(id,name){//查看用户详情
				uni.navigateTo({
					url:`../friendinfo/friendinfo?id=${id}`
				})
			},
			gettoken(){
				try {
				    const value = uni.getStorageSync('wikiuser');
				    if (value) {
				       this.user = (JSON.parse(value))
				    }
				} catch (e) {
				    console.log(e)
				}
			},
			search:myfunc.debounce(function(e){
				let keyword = e.detail.value;
				if(keyword == ''){
					this.userlist = []
					return
				}
				uni.request({
					url:this.serverurl+"search/searchinfo",
					data:{
						uid:this.user.id,
						key:keyword,
						token:this.user.token
					},
					method:'POST',
					success:(result)=>{
						
						let exp = eval(`/${keyword}/g`);
						let obj = result.data;
						console.log(obj)
						if(obj.status == 500){
							uni.showToast({
							    title: '网络出现问题',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
							return
						}
						else if(obj.status == 200){
							let friendlist = obj.data.userlist
							this.userlist = friendlist.filter((item,index)=>{
								if(item.name.search(exp) != -1 || item.email.search(exp) != -1){
									if(item.imgurl){	
										item.imgurl = this.serverurl+`userimage/${item.imgurl}`;				
									}	
									// this.isfriend(item);
									item.realname = item.name
									item.name = item.name.replace(exp,`<span style = "color:red">${keyword}</span>`)
									item.email = item.email.replace(exp,`<span style = "color:red">${keyword}</span>`)
									return item
								}
							})
						}else if(obj.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},400),
			isfriend(e){
				let myfriends = data.myfriends();
				let flag = myfriends.some((item)=>{
					return item.frienid == e.id
				})
				e.flag = flag
			},
			backfirendlist(){
				uni.navigateTo({
					url:"../../pages/friendslist/friendslist"
				})
			}
		}
	}
</script>

<style lang="scss">
.mysearch{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.search{
		box-sizing: border-box;
		height: 120rpx;
		width: 100%;
		border-bottom: solid 1rpx $uni-border-color;
		padding: 26rpx 44rpx;
		.left{
			width: 85%;
			position: relative;
			height: 100%;
			float: left;
			.input{
				box-sizing: border-box;
				width: 100%;
				padding-left: 20rpx;
				background-color: $uni-bg-color-grey;
				height: 100%;
				border-radius: $uni-font-size-sm;
			}
			.searchimg{
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				right: 4%;
			}
		}
		.right{
			// width: 10%;
			height: 100%;
			float: right;
			display: flex;
			align-items: center;
			justify-content:flex-end ;		
			font-size: $uni-font-size-lg;
			font-weight: bold;
			
		}
	}
	.container{
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		.list{
			margin-top: 24rpx;		
			.title{
				font-size: 48rpx;
				font-weight: bold;
				padding-left: 28rpx;
				margin-bottom: 24rpx;
			}
			.useritem{
				padding: 0 28rpx;
				height: 104rpx;
				display: flex;
				margin-bottom: 24rpx;
				
				.left{
					height: 100%;
					display: inline-block;
					.img{
						box-sizing: border-box;
						width: 104rpx;
						height: 104rpx;
						border-radius: 34rpx;
						border: 4rpx solid rgba(52, 199, 88, 100);
						background-color:#9CFF2D55 ;
					}
				}
				.right{
					display: inline-block;
					flex: 1;
					display: flex;
					align-items: center;
					padding-left: 28rpx;
					justify-content: space-between;
					.name{
						color: rgba(16, 16, 16, 100);
						font-size: $uni-font-size-lg;		
						font-size: 36rpx;
						.user{
							font-weight: bold;
						}
						.email{
							font-size: 26rpx;
							color: rgba(189, 189, 189, 100);
						}
					}
					.btn{
						width: 146rpx;
						height: 56rpx;
						line-height: 56rpx;;
						border-radius: $uni-border-radius-lg;						
						font-size: $uni-font-size-base;
						text-align: center;
						font-family: Arial;	
						font-weight: bold;
						border: 1px solid rgba(187, 187, 187, 100);
						&.send{
							color: rgba(16, 16, 16, 100);							
							background-color: rgba(255, 203, 1, 100);
						}
						&.add{
							background-color: rgba(229, 229, 234, 100);
							color: rgba(90, 200, 250, 100);
						}
					}
				}
			}
		}
	}
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to  {
	  opacity: 0;
	}
}
</style>
